<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="数据场：">
                  <el-input v-model="from.dataFactoryName" placeholder="请输入数据场" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="账户/用户名：">
                  <el-input v-model="from.userName" placeholder="请输入账户/用户名" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="合约：">
                  <el-select v-model="from.contractId" placeholder="请选择" clearable class="selWidth">
                    <el-option v-for="item in options" :key="item.contractName" :label="item.contractName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间：">
                  <el-date-picker v-model="from.beginTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" clearable class="selWidth">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：">
                  <el-date-picker v-model="from.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" clearable class="selWidth">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" icon="el-icon-search" size="small" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" icon="el-icon-refresh" size="small" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" icon="el-icon-top" size="small" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="dataFactoryName" label="数据场" min-width="80" />
        <el-table-column prop="userName" label="账户/用户名" min-width="100" />
        <el-table-column prop="reportUserContractVoList" label="合约" min-width="600">
          <template slot-scope="scope">
            <el-table border :data="scope.row.reportUserContractVoList" border style="width: 100%">
              <!-- <el-table-column prop="userName" label="账户/用户名" />
              <el-table-column prop="dataFactoryName" label="数据场" /> -->
              <el-table-column prop="symbol" label="合约" />
              <el-table-column prop="volume" label="手数" />
              <el-table-column prop="exitResult" label="平仓结果">
                <template slot-scope="scope">
                  <span v-if="scope.row.exitResult == 0">0</span>
                  <span v-if="scope.row.exitResult < 0" class="g">{{ parseFloat(`${scope.row.exitResult}`)
                    .toFixed(2)
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}</span>
                  <span v-if="scope.row.exitResult > 0" class="r">{{ parseFloat(`${scope.row.exitResult}`)
                    .toFixed(2)
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",") }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="fee" label="服务费" /> -->
              <el-table-column prop="fee" label="服务费" min-width="100">
                <template slot-scope="scope">
                  <span>{{
                    parseFloat(`${scope.row.fee}`)
                      .toFixed(2)
                      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                    }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="beginTime" label="开始时间" />
              <el-table-column prop="endTime" label="结束时间" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="sunVolume" label="总手数" min-width="70" />
        <el-table-column prop="sunExitResult" label="总平仓结果" min-width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.sunExitResult == 0">0</span>
            <span v-if="scope.row.sunExitResult < 0" class="g">{{ scope.row.sunExitResult }}</span>
            <span v-if="scope.row.sunExitResult > 0" class="r">{{ scope.row.sunExitResult }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sunFee" label="总服务费" min-width="70" />
        <!-- <el-table-column prop="beginTime" label="开始时间" min-width="120" />
        <el-table-column prop="endTime" label="结束时间" min-width="120" /> -->
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  exchangecontractGetOption
} from '@/api/transaction'
import {
  reportGetUserReport,
  reportUserReportExport
} from '@/api/reportQuery'
export default {
  data() {
    return {
      options: [],
      labelPosition: 'right',
      from: {
        dataFactoryName: '',
        userName: '',
        contractId: '',
        beginTime: '',
        endTime: '',
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0
      },
    }
  },
  mounted() {
    exchangecontractGetOption().then(res => {
      console.log('合约全列表', res)
      this.options = res
      this.getlist()
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    exportTable() {
      reportUserReportExport(this.from).then(res => {
        console.log('导出表格', res)
        window.open(res.filename);
      }).catch(err => {
        console.log(err)
        this.$message.error(err)
      })
    },
    search() {
      this.from.page = 1
      this.from.limit = 15
      this.getlist()
    },
    reset() {
      this.from = {
        dataFactoryName: '',
        userName: '',
        contractId: '',
        beginTime: '',
        endTime: '',
        page: 1,
        limit: 15,
      }
      this.getlist()
    },
    getlist() {
      this.loading = true
      reportGetUserReport(this.from).then(res => {
        console.log(res)
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    pageChange(page) {
      this.from.page = page
      this.getlist()
    },
    handleSizeChange(val) {
      this.from.limit = val
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}

.r {
  color: #ff210d;
}

.g {
  color: #019101;
}
</style>
